<form id="form_add_page_column" enctype="multipart/form-data" method="post" action="#" class="form">
    <div class="wrapper-form flex-container-row" id="form_content_add_page_column">
        <div class="flex-item flex1">
            <dl class="row">
                <dt class="tit">
                    <label>列字段</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="column_name" class="input-txt" />
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>列名称</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="column_title" class="input-txt" />
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>列宽</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="column_width" class="input-txt" />px
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>元素类型</label>
                </dt>
                <dd class="opt">
                    <input type="element_type" id="input_element_type_in_add_page_column">
                </dd>
            </dl>
            <div class="hide" id="row_dictionary_id_in_add_page_column">
            <dl class="row">
                <dt class="tit">
                    <label>下拉选项</label>
                </dt>
                <dd class="opt">
                    <input type="dictionary_id" id="input_dictionary_id_in_add_page_column">
                </dd>
            </dl>
            </div>

            <dl class="row">
                <dt class="tit">
                    <label>标题位置</label>
                </dt>
                <dd class="opt">
                    <select name="fix_position">
                        <option value="">请选择</option>
                        <option value="left">居左</option>
                        <option value="center">居中</option>
                        <option value="right">居右</option>
                    </select>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>排序</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="sort" class="input-txt" />
                </dd>
            </dl>
        </div>


        <div class="flex-item flex1">
            <dl class="row">
                <dt class="tit">
                    <label>新增是否包含</label>
                </dt>
                <dd class="opt">
                    <label><input type="radio" value="1" checked="checked" name="is_in_add">是</label>
                    <label><input type="radio" value="0" name="is_in_add">否</label>
                    <span class="err"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>编辑是否包含</label>
                </dt>
                <dd class="opt">
                    <label><input type="radio" value="1" checked="checked" name="is_in_edit">是</label>
                    <label><input type="radio" value="0" name="is_in_edit">否</label>
                    <span class="err"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>是否必填</label>
                </dt>
                <dd class="opt">
                    <label><input type="radio" value="1" checked="checked" name="is_require">是</label>
                    <label><input type="radio" value="0" name="is_require">否</label>
                    <span class="err"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>是否支持排序</label>
                </dt>
                <dd class="opt">
                    <label><input type="radio" value="1" checked="checked" name="is_sort">是</label>
                    <label><input type="radio" value="0" name="is_sort">否</label>
                    <span class="err"></span>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>是否隐藏</label>
                </dt>
                <dd class="opt">
                    <label><input type="radio" value="1" checked="checked" name="is_hide">是</label>
                    <label><input type="radio" value="0" name="is_hide">否</label>
                    <span class="err"></span>
                </dd>
            </dl>

            <dl class="row">
                <dt class="tit">
                    <label>状态</label>
                </dt>
                <dd class="opt">
                    <label><input type="radio" value="1" checked="checked" name="status">启用</label>
                    <label><input type="radio" value="0" name="status">禁用</label>
                    <span class="err"></span>
                </dd>
            </dl>
        </div>


    </div>
</form>
<script>
    $(function(){
        var elementTypeOption = getDictionarySubOption(2);
        var dictionaryOption = getDictionaryOption();
        var elementTypeConfig = {
            data:elementTypeOption,
            textField:'sub_name',
            valueField:'sub_value',
            onSelect:function(item){
                if('select' == item.sub_value){
                    var dictionaryConfig = {
                        data:dictionaryOption,
                        textField:'dictionary_name',
                        valueField:'id',
                    };
                    $("#input_dictionary_id_in_add_page_column").combobox(dictionaryConfig);
                    $("#row_dictionary_id_in_add_page_column").removeClass("hide");
                }else{
                    $("#row_dictionary_id_in_add_page_column").addClass("hide");
                }
            }
        };
        $("#input_element_type_in_add_page_column").combobox(elementTypeConfig);

    });

    function getDictionaryOption()
    {
        var list = [];
        $.ajax({
            url:'/api/Dictionary/getDictionaryOption',
            type:'post',
            data: {},
            dataType:'json',
            async:false,
            success:function(resp){
                if(1 == resp.code){
                    list = resp.data;
                }
            }
        });
        return list;
    }
</script>
